<script setup>
import {computed} from "vue";
import {Fold} from "@element-plus/icons-vue";
import {Close} from "@element-plus/icons-vue";
import {useStore} from 'vuex'
import {useRoute,useRouter} from "vue-router";
const userInfo = JSON.parse(localStorage.getItem("pz_userInfo"))
const route = useRoute();
const router = useRouter();
//拿到store的实例
const store = useStore()
const selectMenu = computed(()=>store.state.menu.selectMenu)
//关闭tag
const closeTab = (item,index)=>{
  store.commit('closeMenu',item)
  //删除当前页的tag
  if(route.path!==item.path){
    return ;
  }
  const selectMenuData = selectMenu.value;
  if(index===selectMenuData.length){
    if(!selectMenuData.length){
      router.push('/')
    }else{
      router.push({
        path:selectMenuData[index-1].path,
      })
    }
  }else{
    router.push({
      path:selectMenuData[index].path,
    })
  }
}
const handleClick = (command)=>{
    if(command==="cancel"){
      localStorage.removeItem("pz_token")
      localStorage.removeItem("pz_userInfo")
      localStorage.removeItem("pz_v3pz")
      window.location.href = window.location.origin
    }
}
</script>

<template>
  <div class="header-container">
    <div class="header-left flex-box">
<!--      图标样式有问题-->
      <el-icon size="20" @click="store.commit('collapseMenu')"><Fold/></el-icon>
      <ul class="flex-box">
        <li v-for="(item,index) in selectMenu"
        :key="item.path"
        :class="{selected:route.path===item.path}"
        class="tab flex-box">
          <el-icon class="icon" size="12"><component :is="item.icon"/></el-icon>
          <router-link class="text flex-box" :to="{path:item.path}">
            {{item.name}}
          </router-link>

          <el-icon size="12" class="close" @click="closeTab(item,index)"><Close/></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
        <el-dropdown @command="handleClick">
          <div class="el-dropdown-link flex-box">
            <el-avatar :src="userInfo.avatar"/>
            <p class="user-name">{{ userInfo.name }}</p>
          </div>
          <template #dropdown>
              <el-dropdown-item command="cancel">退出</el-dropdown-item>
          </template>
        </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="less">
.flex-box{
  display: flex;
  align-items: center;
  height: 100%;
}
.header-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background-color: #ffffff;
  padding-right: 25px;
  .header-left{
    height:100%;
    .icon{
      width: 45px;
      height: 100%;
    }
    .icon:hover{
      background-color: #f5f5f5;
      cursor:pointer;
    }
    .tab {
      height: 100%;
      padding: 0 10px;
      .text{
        margin: 0 5px;
      }
      .close{
        visibility: hidden;
      }
      &.selected{
        a{
          color: #409eff;
        }
        i{
          color: #409eff;
        }
        background-color: #f5f5f5;
      }
    }
    .tab:hover{
      background-color:#f5f5f5;
      .close{
        visibility: inherit;
        cursor:pointer;
        color: #000;
      }
    }
  }
  .header-right{
    .user-name{
      margin-left: 10px;
    }
  }
  a {
    height: 100%;
    color: #333;
    font-size: 15px;
  }
}
</style>